<template>
  <div class="left-panel">
    <div v-for="(item, index) in slideList" :key="index">
      <p class="title">{{ item.title }}</p>
      <div class="chart-wrapper">
        <div class="data-container">
          <div class="left">
            <img src="@/assets/images/exhibition/data-icon.png" alt="" />
            <div class="data-detail">
              <span> {{ item.topData[0].label }}</span>
              <div>
                <span>{{ item.topData[0].num1 }}</span
                ><span>{{ item.topData[0].unit }}</span>
              </div>
            </div>
          </div>
          <div class="right">
            <img src="@/assets/images/exhibition/data-icon.png" alt="" />
            <div class="data-detail">
              <span> {{ item.topData[1].label }}</span>
              <div>
                <span>{{ item.topData[1].num2 }}</span
                ><span>{{ item.topData[1].unit }}</span>
              </div>
            </div>
          </div>
        </div>
        <div :id="item.id" class="chart-container"></div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import _ from 'lodash'
import { chartStyle } from '../config/chartStyle'
export default {
  name: 'leftTrendPane',
  props: {
    data: {
      type: Object,
      required: true,
    },
    todayData: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      slideList: [
        {
          id: 'port',
          title: '端口数据',
          topData: [
            {
              label: '当月新增端口数',
              num1: '',
              unit: '个',
            },
            {
              label: '今日新增端口数',
              num2: '',
              unit: '个',
            },
          ],
        },
        {
          id: 'charge',
          title: '充电数据',
          topData: [
            {
              label: '当月充电次数',
              num1: '',
              unit: '次',
            },
            {
              label: '今日充电次数',
              unit: '次',
            },
          ],
        },
        {
          id: 'user',
          title: '用户数据',
          topData: [
            {
              label: '当月新增用户',
              num1: '',
              unit: '个',
            },
            {
              label: '今日新增用户',
              unit: '个',
            },
          ],
        },
      ],
      chartList: [],
    }
  },
  watch: {
    data(val) {
      this.chartList = []
      val.portStatistic && this._handleChartData(val.portStatistic, 'port', 0)
      val.billStatistic && this._handleChartData(val.billStatistic, 'charge', 1)
      val.userStatistic &&
        this._handleChartData(val.userStatistic, 'user', 2, val)
    },
    todayData(val) {
      this._handleTodayData(val)
    },
  },
  methods: {
    _handleTodayData(data) {
      this.slideList[0]['topData'][1].num2 = data.device
      this.slideList[1]['topData'][1].num2 = data.consumeBill
      this.slideList[2]['topData'][1].num2 = data.appUser
    },
    _handleChartData(data, id, index, allData) {
      let chartDom = document.getElementById(id)
      if (!chartDom) return
      let myChart = echarts.init(chartDom)
      let option
      let XAxis = []
      let YAxis = []
      let YAxis2 = []
      let YAxis3 = []
      data.forEach((item) => {
        XAxis.push(item.day.substring(2, 4) + '-' + item.day.substr(4))
        YAxis.push(item.amount)
      })
      if (allData && allData.cmccUserStatistic) {
        allData.cmccUserStatistic.forEach((item, index) => {
          YAxis2.push(item.amount)
          YAxis3.push(YAxis[index] - item.amount)
        })
      }
      this.slideList[index]['topData'][0].num1 =
        index === 1
          ? data[data.length - 1].amount
          : data[data.length - 1].amount - data[data.length - 2].amount

      option = {
        animation: true,
        legend: {
          show: allData ? true : false,
          data: ['移动用户数', '非移动用户数'],
          right: 0,
          top: 0,
          itemHeight: 6,
          textStyle: {
            color: '#fff',
          },
        },
        grid: {
          top: '30px',
          bottom: '4px',
          containLabel: true,
        },
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          axisLine: {
            show: true,
            lineStyle: {
              color: '#fff',
              opacity: 0.22,
              width: 2,
            },
          },
          axisTick: {
            show: false,
          },
          data: XAxis,
        },
        yAxis: {
          name: '总数量',
          nameTextStyle: {
            align: 'right',
          },
          show: true,
          axisLabel: {
            hideOverlap: true,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#fff',
              opacity: 0.22,
              width: 2,
            },
          },
          splitLine: {
            show: false,
          },
        },
        series: _.concat(
          [
            _.assign(
              {
                name: '总数量',
                data: YAxis,
              },
              chartStyle.seriesLineObj(
                'rgba(0, 166, 243, 1)',
                'rgba(0, 166, 243, 0)'
              ),
              {
                smooth: false,
              }
            ),
          ],
          allData
            ? [
                {
                  type: 'bar',
                  name: '移动用户数',
                  barWidth: '30%',
                  itemStyle: {
                    color: '#6DE3FD',
                  },
                  data: YAxis2,
                },
                {
                  type: 'bar',
                  name: '非移动用户数',
                  itemStyle: {
                    color: '#FFC048',
                  },
                  barWidth: '30%',
                  data: YAxis3,
                },
              ]
            : []
        ),
      }
      option && myChart.setOption(option)
      this.chartList.push(myChart)
    },
    _handleRezize() {
      this.$nextTick(() => {
        this.chartList.forEach((item) => item && item.resize())
      })
    },
  },
  mounted() {},
  activated() {
    window.addEventListener('resize', this._handleRezize)
  },
  deactivated() {
    window.removeEventListener('resize', this._handleRezize)
  },
  deystroyed() {
    window.removeEventListener('resize', this._handleRezize)
  },
}
</script>
<style lang="scss" scoped>
.left-panel {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  & > div {
    width: 100%;
    height: 33.33%;
    background: url(../../../assets/images/exhibition/leftbg-shadow.png) center
      center no-repeat;
    background-size: 100% 100%;
    position: relative;
    padding-left: 12px;
    overflow: hidden;
    .chart-wrapper {
      height: calc(86% - 40px);
      background: url(../../../assets/images/exhibition/leftbgb.png) center
        center no-repeat;
      background-size: 100% 100%;
      width: 90%;
      position: relative;
      .data-container {
        display: flex;
        justify-content: space-around;
        box-sizing: border-box;
        align-items: center;
        padding-top: 10px;
        & > .left,
        & > .right {
          display: flex;
          align-items: flex-start;
          img {
            margin-right: 6px;
          }
          .data-detail {
            & > span {
              font-size: 14px;
              color: #ffffff;
            }
            & > div {
              span:nth-child(1) {
                font-size: 20px;
                font-weight: bold;
                color: #6de3fd;
              }
              span:nth-child(2) {
                font-size: 12px;
                color: #ffffff;
              }
            }
          }
        }
      }
      .chart-container {
        width: 100%;
        height: calc(100% - 65px);
      }
    }
  }
}
@media screen and (max-width: 1440px) {
  .left-panel {
    & > div {
      padding-left: 2px;
      .chart-wrapper {
        height: calc(86% - 30px);
        .data-container {
          padding-top: 2px;
          & > .left,
          & > .right {
            img {
              margin-right: 2px;
              width: 14px;
            }
            .data-detail {
              & > span {
                font-size: 12px;
              }
              & > div {
                span:nth-child(1) {
                  font-size: 14px;
                }
                span:nth-child(2) {
                  font-size: 12px;
                }
              }
            }
          }
        }
        .chart-container {
          width: 100%;
          height: calc(100% - 44px);
        }
      }
    }
  }
}
</style>
